/**
 * @fileoverview Select screen Template for Coding in Chrome editor.
 *
 * @license Copyright 2017 The Coding with Chrome Authors.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 *
 * @author mbordihn@google.com (Markus Bordihn)
 */
{namespace cwc.soy.SelectScreenTemplate autoescape="strict"}


/**
 * Container
 */
{template .container}
  {@param content: ?}
  {@param? infobar: ?}
  {@param? header: ?}
  {@param? id: string}
  {@param? prefix: string}

  <div{if $id} id="{$prefix}{$id}"{/if}>
    {if $infobar}{$infobar}{/if}
    {if $header}{$header}{/if}
    <div class="mdl-grid">
      {$content}
    </div>
    {if $id}
      <div id="{$prefix}{$id}-addon"></div>
    {/if}
  </div>
{/template}


/**
 * Container
 */
{template .containerSub}
  {@param content: ?}

  <div>
    <div class="mdl-tabs mdl-js-tabs mdl-js-ripple-effect">
      {$content}
    </div>
  </div>
{/template}


/**
 * Select card design.
 */
{template .selectCard}
  {@param link_text: string}
  {@param text: string}
  {@param title: string}
  {@param? hidden: bool}
  {@param? opt_color_class: string}
  {@param? opt_icon: string}
  {@param? opt_image: string}

  {call .dataActionDiv_ data="all"}
    {param classes: 'mdl-card-square mdl-card mdl-shadow--2dp' /}
    {param content kind="html"}
      <div class="mdl-card__title mdl-card--expand {if $opt_color_class} {$opt_color_class}{/if}">
        {if $opt_image}<img src="../{$opt_image}">{/if}
        {if $opt_icon}
          <div class="mdl-card__title-icon icon_auto">
            {$opt_icon}
          </div>
        {/if}
        <h2 class="mdl-card__title-text">
          {msg desc=""}{$title|changeNewlineToBr}{/msg}
        </h2>
      </div>
      <div class="mdl-card__supporting-text">
        <span class="mdl-typography--font-light mdl-typography--subhead">
          {msg desc=""}{$text}{/msg}
        </span>
      </div>
      <div class="mdl-card__actions mdl-card--border">
         <a href="#" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
           {msg desc=""}{$link_text}{/msg}
           <i class="material-icons">chevron_right</i>
         </a>
      </div>
    {/param}
  {/call}
{/template}


/**
 * Select card design.
 */
{template .fileCardList}
  {@param content: ?}
  {@param? id: string}
  {@param? title: string}
  {@param? icon: string}

  {if $title}
    <div class="cwc-file-card-list-title">
      {if $icon}
        <i class="material-icons">{$icon}</i>
      {/if}
      {msg desc=""}{$title}{/msg}
    </div>
  {/if}

  <div class="cwc-file-card-list mdl-grid"{if $id} id="{$id}"{/if}>
    {$content}
  </div>
{/template}


/**
 * Select card design.
 */
{template .fileCard}
  {@param text: string}
  {@param title: string}
  {@param? id: string}
  {@param? hidden: bool}
  {@param? warning: string}
  {@param? opt_link_text: string}
  {@param? opt_color_class: string}
  {@param? opt_icon: string}
  {@param? opt_image: string}


  {call .dataActionDiv_ data="all"}
    {param classes: 'cwc-file-card mdl-card mdl-shadow--2dp' /}
    {param content kind="html"}
      <div class="card__header{if $opt_color_class} {$opt_color_class}{/if}">
        <h3>{msg desc=""}{$title|changeNewlineToBr}{/msg}</h3>
        <div class="card__logo">
          {if $opt_image}
            <img src="../{$opt_image}">
          {elseif $opt_icon}
            <div class="cwc-select-card-icon">
              <i class="icon_auto">{$opt_icon}</i>
            </div>
          {else}
            <div class="cwc-select-card-icon">
              <i class="icon_auto">insert_drive_file</i>
            </div>
          {/if}
        </div>
      </div>
      <div class="mdl-card__supporting-text">
        {msg desc=""}{$text}{/msg}
      </div>
      {if $warning}
        <div class="mdl-card__supporting-text mdl-color-text--red">
          {msg desc=""}{$warning}{/msg}
        </div>
      {/if}

      <div class="mdl-card__actions mdl-card--border"{if $id} id="{$id}"{/if}>
        <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
          {if $opt_link_text}
            {msg desc=""}{$opt_link_text}{/msg}
          {else}
            {msg desc=""}Load{/msg} {msg desc=""}{$title}{/msg}
          {/if}
        </a>
      </div>
    {/param}
  {/call}
{/template}


/**
 * Select card video design.
 */
{template .selectCardVideo}
  {@param link_text: string}
  {@param text: string}
  {@param title: string}
  {@param video_id: string}
  {@param? opt_color_class: string}

  <div class="cwc-file-card mdl-cell mdl-card mdl-shadow--4dp">
    <div class="mdl-card__media{if $opt_color_class} {$opt_color_class}{/if}">
      <webview style="width: 100%; height: 100%;" src="https://www.youtube-nocookie.com/embed/{$video_id}?rel=0&amp;controls=0" frameborder="0"></webview>
    </div>
    <div class="mdl-card__title">
      <h2 class="mdl-card__title-text">
        {msg desc=""}{$title}{/msg}
      </h2>
    </div>
    <div class="mdl-card__supporting-text">
      {msg desc=""}{$text}{/msg}
    </div>
    <div class="mdl-card__actions mdl-card--border">
      <a href="https://youtu.be/{$video_id}" target="_blank" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect mdl-button--accent">
        {msg desc=""}{$link_text}{/msg}
        <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span>
      </a>
    </div>
  </div>
{/template}


/**
 * Select section design.
 */
{template .selectSection}
  {@param content: ?}
  {@param id: string}
  {@param modules: ?}
  {@param text: string}
  {@param title: string}
  {@param? opt_color_class: string}
  {@param? opt_icon: string}
  {@param? opt_icon_rotate: string}
  {@param? opt_image: string}

  {let $isEnabled: isNonnull($modules[$id]) and $modules[$id] == true or not isNonnull($modules[$id]) /}

  <div class="mdl-card-wide mdl-card mdl-card--expand mdl-shadow--2dp{if not $isEnabled} hidden{/if}">
    <div class="mdl-card__title{if $opt_color_class} {$opt_color_class}{/if}">
      {if $opt_image}<img src="../{$opt_image}">{/if}
      {if $opt_icon}
        <i class="mdl-card__title-icon icon_auto{if $opt_icon_rotate} icon_rotate_{$opt_icon_rotate}deg{/if}">{$opt_icon}</i>
      {/if}
      <h2 class="mdl-card__title-text">
        {msg desc=""}{$title}{/msg}
      </h2>
    </div>
    <div class="mdl-card__supporting-text">
      {msg desc=""}{$text}{/msg}
    </div>
    <div class="mdl-card__actions mdl-card--border">
      {$content}
    </div>
  </div>
{/template}


/**
 * Select section link.
 */
{template .selectSectionLink}
  {@param text: string}

  {call .dataActionLink_ data="all"}
    {param classes: 'mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect' /}
    {param content kind="html"}
      {msg desc=""}@@SELECT_SCREEN__USE{/msg} {$text}
      <i class="material-icons">chevron_right</i>
    {/param}
  {/call}
{/template}


/**
 * Header design.
 */
{template .header}
  {@param title: string}
  {@param? opt_icon: string}
  {@param? opt_text: string}

  <header class="cwc-select-header">
    {if $opt_icon}<div class="header__icon icon_auto">{$opt_icon}</div>{/if}
    <div class="header__text">
      <div class="mdl-typography--display-1 mdl-typography--font-thin">
        {msg desc=""}{$title}{/msg}
      </div>
      {if $opt_text}
        <p class="mdl-typography--headline mdl-typography--font-thin mdl-color-text--grey-500">
          {msg desc=""}{$opt_text}{/msg}
        </p>
      {/if}
    </div>
  </header>
{/template}


/**
 * Main tab bar link
 */
{template .mainTabBarLink}
  {@param id: string}
  {@param? active: bool}
  {@param? icon: string}
  {@param? name: string}
  {let $tab_id: 'select-screen-tab-' + $id /}

  <a href="#{$tab_id}" id="{$tab_id}-link" class="mdl-layout__tab{if $active} is-active{/if}">
    {if $icon}<i class="icon_24px" aria-hidden="true">{$icon}</i>{/if}
    {if $name}{msg desc=""}{$name}{/msg}{/if}
  </a>
{/template}


/**
 * Main tab bar Home
 */
{template .mainTabBarHome}
  {@param prefix: string}

  <a href="#home" id="{$prefix}tab-home">
    <i class="icon_24px" aria-hidden="true">home</i>
  </a>
{/template}


/**
 * Main tab bar content
 */
{template .mainTabBarContent}
  {@param content: ?}
  {@param id: string}
  {@param? active: bool}
  {let $tab_id: 'select-screen-tab-' + $id /}

  <section class="mdl-layout__tab-panel{if $active} is-active{/if}" id="{$tab_id}">
    {$content}
  </section>
{/template}


/**
 * Sub tab bar link
 */
{template .subTabBarLink}
  {@param id: string}
  {@param name: string}
  {@param modules: ?}
  {@param? active: bool}
  {@param? icon: bool}
  {@param? module: string}
  {let $tab_id: 'select-screen-tab-' + $id /}
  {let $isEnabled: isNonnull($modules[$module]) and $modules[$module] == true or not isNonnull($modules[$module]) /}

  <a href="#{$tab_id}" id="{$tab_id}-link" class="mdl-tabs__tab
    {if $icon} icon_24px_raw{/if}
    {if $active} is-active{/if}
    {if not $isEnabled} hidden{/if}">{msg desc=""}{$name}{/msg}</a>

{/template}


/**
 * Sub tab bar content
 */
{template .subTabBarContent}
  {@param content: ?}
  {@param id: string}
  {@param? active: bool}
  {let $tab_id: 'select-screen-tab-' + $id /}

  <section class="mdl-tabs__panel{if $active} is-active{/if}" id="{$tab_id}">
    {$content}
  </section>

{/template}


/**
 * Custom footer.
 */
{template .footer}
  {@param text: string}
  {@param? opt_text: string}

  <footer class="mdl-mini-footer">
    <div class="mdl-mini-footer__left-section">
      {$text}{if $opt_text}<br>{$opt_text}{/if}
    </div>
  </footer>
{/template}


/**
 * Bluetooth notification
 */
{template .bluetooth}
  {@param bluetooth: bool}

  {if not $bluetooth}
    {call cwc.soy.ui.Infobar.template}
      {param type: 'error' /}
      {param content kind="html"}
        {msg desc=""}@@SELECT_SCREEN__BLUETOOTH_NOT_AVAILABLE{/msg}
        (Try <a href="https://chrome.google.com/webstore/detail/coding-with-chrome/becloognjehhioodmnimnehjcibkloed" target="_blank">Chrome App</a> or
        <a href="https://github.com/google/coding-with-chrome/releases" target="_blank">Native App</a>)
      {/param}
    {/call}
  {/if}
{/template}


/**
 * Bluetooth Web notification
 */
{template .bluetoothWeb}
  {@param bluetoothWeb: bool}
  {@param bluetoothWebLight: bool}

  {if $bluetoothWebLight}
    {call cwc.soy.ui.Infobar.template}
      {param type: 'warn' /}
      {param content kind="html"}
        {msg desc=""}@@SELECT_SCREEN__BLUETOOTH_WEB_LIGHT{/msg}
        (<a href="https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md" target="_blank">Status</a>)
      {/param}
    {/call}
  {elseif not $bluetoothWeb}
    {call cwc.soy.ui.Infobar.template}
      {param type: 'error' /}
      {param content kind="html"}
        {msg desc=""}@@SELECT_SCREEN__BLUETOOTH_WEB_NOT_AVAILABLE{/msg}
        (<a href="https://github.com/WebBluetoothCG/web-bluetooth/blob/master/implementation-status.md" target="_blank">Status</a>)
      {/param}
    {/call}
  {/if}
{/template}


/**
 * Data file actions.
 */
{template .dataActionDiv_ private="true"}
  {@param content: ?}
  {@param? classes: string}
  {@param? file: string}
  {@param? hidden: bool}
  {@param? mode: string}
  {@param? tab: string}
  {@param? tour: string}
  {@param? tutorial: string}

  <div class="{if $classes}{$classes}{/if}{if $hidden} hidden{/if}"
    {if $file}
      data-select-screen-action="loadFile"
      data-select-screen-value="{$file}"
    {elseif $mode}
      data-select-screen-action="loadMode"
      data-select-screen-value="{$mode}"
    {elseif $tab}
      data-select-screen-action="switchTab"
      data-select-screen-value="select-screen-tab-{$tab}-link"
    {elseif $tour}
      data-select-screen-action="loadTour"
      data-select-screen-value="{$tour}"
    {elseif $tutorial}
      data-select-screen-action="loadTutorial"
      data-select-screen-value="{$tutorial}"
    {/if}
  >{$content}</div>
{/template}


/**
 * Data file actions.
 */
{template .dataActionLink_ private="true"}
  {@param content: ?}
  {@param? file: string}
  {@param? classes: string}
  {@param? mode: string}
  {@param? tab: string}
  {@param? hidden: bool}

  <a href="#" class="{if $classes}{$classes}{/if}{if $hidden} hidden{/if}"
    {if $file}
      data-select-screen-action="loadFile"
      data-select-screen-value="{$file}"
    {elseif $mode}
      data-select-screen-action="loadMode"
      data-select-screen-value="{$mode}"
    {elseif $tab}
      data-select-screen-action="switchTab"
      data-select-screen-value="select-screen-tab-{$tab}-link"
    {/if}
  >{$content}</a>
{/template}
